<template>
    <div class="menu">
        <div class="menu-title">
            <slot></slot>
        </div>
        <div class="menu-list">
            <div class="menu-item" v-for="(item,index) in menu" @click="locationHref(item.id)">
                <div class="icon img-response">
                    <img :src="item.icon" alt="">
                </div>
                <div>
                    {{item.icon_title.substr(0,4)}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'footer',

        props:['menu'],

        data() {
            return {

            }
        },

        methods:{
          locationHref(id) {
              this.$router.push(`/home/person/service/detail?id=${id}`)
          }
        },

        mounted() {
            console.log(this.$route);
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../plugins/assets/css/flex.less';
    .menu {
        background: #fff;
        margin-bottom: 5vw;
        padding: 2vw 0;
        .menu-title{
            border-left:1vw solid #602C88;
            .box-sizing;
            padding:1vw 3vw;
            font-size:4.5vw;
        }
        .menu-list {
            .box-sizing;
            .flex-between;
            text-align: center;
            padding: 4vw 6vw;
            color: #5C6166;
            .menu-item {
                width: 20%;
                :last-child {
                    font-size: 14px;
                }
            }
            .icon {
                text-align: center;
                width: 10vw;
                height:10vw;
                margin: 0 auto;
                color: #9578AB;
                i {
                    font-size: 7vw;
                }
            }
            > div {
                :first-child {
                    margin-bottom:2vw;
                }
            }
        }
    }
</style>